<style lang="scss">
  @import 'index';
</style>
<style type="text/css">
  .backfff{background: #fff !important;}
</style>

<template>
  <div class="ga-container">
    <div class="ga-product-detail">
      <!-- 顶部swiper -->
      <div>
        <swiper
          :indicator-dots="swiper.indicatorDots"
          :autoplay="swiper.autoplay"
          :interval="swiper.interval"
          :duration="swiper.duration"
          indicator-color="white"
          indicator-active-color="#ff3a35">
          <block v-for="(item,index) in swiper.imgUrls"  :key="index">
            <swiper-item>
              <image mode="aspectFit" :src="item" class="slide-image"/>
            </swiper-item>
          </block>
        </swiper>
      </div>

      <!--拼团 start-->
      <div class="ga-cell top-box">
        <div class="item">
          <div class="box">
            <span class="span1">拼团价</span>
            <span class="span2">¥</span>
            <span class="span3">{{data.price}}</span>
            <div>
              <p class="throughLine">¥{{data.shop_price}}</p>
              <p>{{data.buy_num}}人团</p>
            </div>
          </div>

          <div class="num">已团{{data.group_num}}件</div>
        </div>
      </div>
      <!--拼团 end-->


      <div class="ga-cell type-box">
        <div class="item">
          <div>
            <p>
              <span class="btn primary">拼团包邮</span>
              <span class="title">{{data.title}}</span>
            </p>
            <!-- <p class="gGray mt10">甜甜的肉肉的</p> -->
          </div>

          <div class="share-box">
            <i class="gaIcon share"></i>
            <p class="gGray">分享</p>
          </div>
        </div>
      </div>

      <div class="ga-cell mark-box">
        <div class="item">
          <ul class="mark-list clearfix">
           <li v-for="(item,index) in data.goods_lebel" :key="index"><i class="dot"></i>{{item}}</li>
          </ul>

          <span class="dots">...</span>
        </div>
      </div>

      <!--正在进行的拼团-->
      <h1 class="h1 mt10" v-if="buylist.length>0">正在进行的拼团，可直接参与</h1>
      <ul class="ga-cell now-bargain-list">
        <li class="item" v-for="(item,index) in buylist" :key="index">
          <div class="img-box">
            <img mode="widthFix" :src="item.icon" alt="">
          </div>
          <div class="box1">
            <p class="p1">{{item.nickname}}</p>
            <p class="p2">{{item.group_message}}~</p>
          </div>
          <div class="box2">
            <p class="p1">还差{{item.residue_number}}人成团</p>
            <p class="p2">仅剩 {{item.residue_time}}</p>
          </div>
          <a @click="gogroup(item.id)" class="btn white">去参团</a>
        </li>
      </ul>

      <!--拼团推荐-->
      <h2 class="h2 mt10">拼团推荐</h2>
      <ul class="ga-bargain-list">
        <li class="item" v-for="(item,index) in likelist" :key="index">
          <a :href="'../shopgroup/main?id='+item.seid">
            <div class="img-box">
              <img class="img" :src="item.icon" alt="">
            </div>
            <div class="con-box">
              <p class="p1">{{item.title}}</p>
              <p class="p2">
                <span class="f30 gOrange">¥{{item.price}}</span>
                <span>已团{{item.group_num}}件</span>
              </p>
            </div>
          </a>
        </li>
      </ul>

      <!--详情内容-->
      <div class="pro-detail mt10">
        <div v-html="data.goods_desc" class="imgbox"></div>
      </div>

      <!--固定fixed底部-->
      <div class="ga-bottom-fixed">
        <div class="bottom">
          <!--tabs-->
          <ul class="tabs">
            <li class="item">
              <a @click="bindSwitchTab('../home/main')">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/tab_icon1.png" alt="">
                <p>首页</p>
              </a>
            </li>
            <li class="item">
              <a @click="bindSwitchTab('../shopCart/main')">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/tab_icon3.png" alt="">
                <p>购物车</p>
              </a>
            </li>
            <!-- <li class="item">
              <a @click="bindSwitchTab('../shopCart/main')">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/tab_icon3.png" alt="">
                <p>购物车</p>
              </a>
            </li> -->
          </ul>

          <div class="btn-box">
            <!--(1)售罄-->
            <!--<a href="#" class="btn btn">
              <p>已售击</p>
              <p>去首页看看</p>
            </a>-->

            <!--(2)开团-->
            <a href="#" class="btn btn1 backfff">
              <!-- <p>加入购物车</p> -->
            </a>
            <!--说明：未开团
              禁止点击:disable
            -->
            <a  class="btn btn2" :class="{'disable':!isCompleted}" @click="gogroup()">
              <p class="mt10">¥ {{data.price}}</p>
              <p>一键开团</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {isLogin} from '@/utils/handleLogin'
export default {
  data () {
    return {
      swiper: {
        imgUrls: [],
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 1000
      },
      data: [],
      buylist: [],
      likelist: []
    }
  },
  computed: {
    // 数据是否完成
    isCompleted () {
      // 这里写校验规则，如果表单数据合法，则返回true，否则返回false
      if(parseInt(this.data.buy_num)>parseInt(this.data.stock)){
        return false
      }
      // 先默认为true
      return true
    }

  },
  methods: {
    /** 接口数据 */
    async load () {
      this.$_util.ajax.get('https://guo-a.com/mapi/group/detail?id=' + this.$root.$mp.query.id).then((res) => {
        console.log(res)
         if(res.code === 200){
            this.swiper.imgUrls = res.data.atlas
            if (res.data.hasOwnProperty('goods_desc')) {
              res.data.goods_desc = this.formatImg(res.data.goods_desc)
            }
            this.data = res.data
         }
      })
      this.$_util.ajax.post('https://guo-a.com/mapi/group/buylist?token=' + this.$store.state.Token,{group_id:this.$root.$mp.query.id}).then((res)=>{
        console.log(res)
        if(res.code === 200){
          this.buylist = res.data || []
        }
      })
      this.$_util.ajax.post('https://guo-a.com/mapi/group/getlike',{group_id:this.$root.$mp.query.id}).then((res) => {
        if(res.code === 200){
          this.likelist = res.data
        }
      })
    },
    async gogroup (id=null) {
        isLogin(() => {
          let url = '../confirmgroup/main?id=' + this.$root.$mp.query.id
          if(id){
            url+='&gid=' + id
          }
          this.bindNavigateTo(url)
          
        })

    },
    /** 转换富文本编辑器里面图片的大小自适应*/
    formatImg (str) {
      if (!str) {
        return str
      }
      return str.replace(/<img/gi, '<img style="max-width:100%;height:auto" ')
    },
    /**
     * 路由跳转
     */
    bindNavigateTo (url) {
        wx.navigateTo({
          url
        })
    },
    bindSwitchTab (url) {
        wx.switchTab({
          url
        })
    }
  },

  created () {
  },
  mounted () {
    // this.load()
  },
  onShow () {
      isLogin(()=>{
        this.load()
      })
  }
}
</script>
